// !!! 注意，因为js文件不会被销毁，所以建议只存储不会被修改的常量，或属性值不会被修改的对象

import { ElMessageBox } from 'element-plus';

// 注入vue实例属性
export const instance = {};

// 查询条件
export const formItems = reactive({
  input: {
    component: 'input',
    label: '输入框',
    input(ev) {
      console.log(ev);
    }
  },
  inputNumber: { component: 'input-number', label: '数字' },
  select: {
    component: 'select',
    label: '下拉',
    options: [
      { label: '单品', value: '单品' },
      { label: '套装', value: '套装' }
    ],
    change(ev) {
      console.log(ev);
    }
  },
  cascader: {
    component: 'cascader',
    label: '级联',
    options: [
      {
        value: 'guide',
        label: 'Guide',
        children: [
          {
            value: 'disciplines',
            label: 'Disciplines',
            children: [
              { value: 'consistency', label: 'Consistency' },
              { value: 'feedback', label: 'Feedback' },
              { value: 'efficiency', label: 'Efficiency' },
              { value: 'controllability', label: 'Controllability' }
            ]
          },
          {
            value: 'navigation',
            label: 'Navigation',
            children: [
              { value: 'side nav', label: 'Side Navigation' },
              { value: 'top nav', label: 'Top Navigation' }
            ]
          }
        ]
      }
    ]
  },
  datePicker: {
    component: 'date-picker',
    type: 'datetimerange',
    label: '日期范围'
  },
  timePicker: {
    component: 'time-picker',
    label: '时间选择器'
  },
  timeSelect: {
    component: 'time-select',
    label: '时间选择'
  },
  radio: {
    component: 'radio-group',
    label: '按钮',
    options: [
      { label: '全部', value: '' },
      { label: '可用', value: '1' },
      { label: '停用', value: '0' }
    ]
  },
  checkbox: {
    component: 'checkbox-group',
    label: '多选',
    options: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' }
    ]
  },
  hiddenInput: {
    component() {
      return 'input';
    },
    label() {
      return '隐藏内容';
    },
    hidden() {
      return true;
    }
  },
  customSlot: {
    label: '插槽',
    slot: 'customSlot',
    labelSlot: 'customLabelSlot'
  },
  textarea: {
    component: 'input',
    type() {
      return 'textarea';
    },
    rows: 3,
    resize: 'none',
    label: '文本域'
  }
});

// 表格列
export const columns = ref([
  { type: 'selection' },
  { prop: 'name', slot: 'name', slotHeader: 'nameHeader' },
  {
    prop: 'age',
    label: '年龄',
    headerTip: '请不要谎报年龄'
  },
  {
    prop: 'imgs',
    label: '展示图片',
    isImg: true,
    imgConfig: {
      imgPopover: false,
      imgPreview: true
    },
    minWidth: '160px'
  },
  { prop: 'phone', label: '手机', sortable: true },
  {
    prop: 'date',
    label: '当前时间',
    minWidth: '200px',
    format(data, row) {
      if (!data || !row.name) return '-';
      return `${row.name}：${data.toLocaleString()}`;
    }
  },
  { prop: 'address', label: '地址', minWidth: '160px' },
  { prop: 'desc', label: '描述', minWidth: '200px', slot: 'desc' },
  {
    prop: 'hidden',
    label: '隐藏字段',
    hidden() {
      return true;
    }
  },
  {
    label: '操作',
    width: '200px',
    fixed: 'right',
    buttons: [
      {
        label: '禁用',
        link() {
          return true;
        },
        disabled({ row }) {
          return row.isDisabled;
        },
        click({ row }) {
          row.isDisabled = true;
          setTimeout(() => {
            row.isDisabled = false;
          }, 2000);
        }
      },
      {
        label: '加载',
        loading({ row }) {
          return row.isLoading;
        },
        click({ row }) {
          row.isLoading = true;
          setTimeout(() => {
            row.isLoading = false;
            instance.getTableData();
          }, 2000);
        }
      },
      {
        label: '隐藏',
        type() {
          return 'danger';
        },
        hidden({ row }) {
          return row.isHide;
        },
        click({ row }) {
          ElMessageBox({
            title: '操作确认',
            message: '确定隐藏该按钮2秒？',
            type: 'warning',
            showCancelButton: true,
            beforeClose: (action, evt, done) => {
              if (action !== 'confirm') return done();
              evt.confirmButtonLoading = true;
              setTimeout(async () => {
                done();
                evt.confirmButtonLoading = false;
                $msg.success('隐藏成功');
              }, 500);
            }
          }).then(() => {
            row.isHide = true;
            setTimeout(() => {
              row.isHide = false;
            }, 2000);
          });
        }
      }
    ]
  }
]);
